/* 票务预约组件 */
<template>
  <el-card shadow="never">
    <!-- 场次列表 -->
    <reserve-item 
      :key="index"
      :index="index"
      :disabled="disabled"
      :stock-strategy="stockStrategy"
      ref="reserveItem"
      v-model="value[index]"
      v-for="(item, index) in value"
      @close="onClose(index)" 
    />

    <!-- 场次添加按钮 -->
    <el-button :disabled="disabled" class="add-but" type="primary" icon="el-icon-circle-plus-outline" @click="onAdd">增加场次</el-button>
  </el-card>
</template>

<script>
import reserveItem from './reserve-item'

export default {
  components: { 
    reserveItem 
  },
  props: {
    value: {
      type: Array,
      default: _ => []
    },
    maxLength: {
      type: Number,
      default: 20
    },
    disabled: {
      type: Boolean,
      default: false
    },
    // 库存策略（repertoryType） - 包含库存模式， 日限量库存， 总限量库存三个字段。
    // a. 无限库存 - 将不对场次库存做限制
    // b. 日限量库存（stockDayNum） - 每一场次不能超过日限量库存
    // c. 总限量库存（productTotal） - 所有场次相加不得超过总限量库存
    // d. 日限量库存 + 总限量库存 - 每一场次不能超过日限量库存，所有场次相加不得超过总限量库存
    stockStrategy: {
      type: Object,
      default: _ => {}
    }
  },
  mounted () {
    if (this.value === null) {
      this.$emit('input', [])
    }    
  },
  methods: {
    // 事件 - 增加场次
    onAdd () {
      if (Array.isArray(this.value) && this.value.length >= 20) {
        this.$swal.warning('场次最多添加20个!')
        return
      }
      this.value.push({})
      this.$emit('input', this.value)
    },
    // 事件 - 删除场次
    onClose (index) {
      if (this.disabled) return
   
      this.value.splice(index, 1)
      this.$emit('input', this.value)
    },
    // 方法 - 表单校验
    validate () {
      const result = []
      Array.isArray(this.$refs.reserveItem) && this.$refs.reserveItem.forEach(async (item) => await item.$refs.form.validate(valid => result.push(valid)))
      return result.every(item => item)
    }
  }
}
</script>

<style scoped>
  .add-but {
    width: 100%;
  }

  .reserve-item {
    margin-bottom: 20px;
  }
</style>
